<template>
    <div>
        <h1>列表页面</h1>
        <table cellspacing="0" class="table" border="1">
            <thead>
                <tr>
                    <th>品牌</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr :key="item.id" v-for="item in data">
                    <th>{{ item.name }}</th>
                    <th>{{ item.price }}</th>
                    <th>
                        <button @click="toDetail(item)">详情</button>
                    </th>
                </tr>
            </tbody>
        </table>
    </div>
</template>


<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
// 解构赋值
import {data} from './list.json'

type Item = {
    name: string;
    price: string;
    id: number;
}


// 两个的区别
const route = useRoute()
const router = useRouter()

const toDetail = (item: Item) => {
    // router.push({
    //     path: '/reg',
    // })

    // router.push({
    //     path: '/reg',
    //     query: item
    // })

    // params must name 
    // 这种方法在新版本被移除了，会报错
    // router.push({
    //     name: 'Reg',
    //     params: item
    // })
        router.push({
        name: 'Reg',
        params: {
            id: item.id
        }
    })
}
</script>

<style>
    .login {
        background-color: green;
        height: 400px;
        width: 400px;
        font-size: 20px;
        color: white;
    }
</style>